<template>
  <div>
    <div class="search">
      <router-link to="/">
        <div class="left iconfont icon-arrow-left"></div>
      </router-link>
      <div class="sglass iconfont icon-sousuo"></div>
      <input type="text" placeholder="请输入商品名称搜索" />
    </div>

    <div class="nearshop">
      <div class="first_shop">
        <div class="img"></div>
        <div class="massage">
          <h3>沃尔玛</h3>
          <div class="money">
            <p>月售1万+</p>
            <p>起送￥0</p>
            <p>基础运费￥5</p>
          </div>
          <p>VIP尊享满89元减4元运费券（每月3张）</p>
        </div>
      </div>
    </div>

    <div class="chouse_list">
      <div class="chouse_left">
        <van-sidebar v-model="active">
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
          <van-sidebar-item title="标签名称" />
        </van-sidebar>
      </div>

      <div class="chousename">
        <div class="chouse_name">
          <div class="name_img"></div>
          <div class="name_money">
            <ul>
              <li>番茄250g/份</li>
              <li>月售10件</li>
              <li>
                <p>￥33.6</p>
                <p>￥33.6</p>
              </li>
            </ul>
          </div>
          <div class="name_num">
            <div class="jian"></div>
            <div class="num"></div>
            <div class="jia"></div>
          </div>
        </div>
        <div class="chouse_name">
          <div class="name_img"></div>
          <div class="name_money">
            <ul>
              <li>番茄250g/份</li>
              <li>月售10件</li>
              <li>
                <p>￥33.6</p>
                <p>￥33.6</p>
              </li>
            </ul>
          </div>
          <div class="name_num">
            <div class="jian"></div>
            <div class="num"></div>
            <div class="jia"></div>
          </div>
        </div>
        <div class="chouse_name">
          <div class="name_img"></div>
          <div class="name_money">
            <ul>
              <li>番茄250g/份</li>
              <li>月售10件</li>
              <li>
                <p>￥33.6</p>
                <p>￥33.6</p>
              </li>
            </ul>
          </div>
          <div class="name_num">
            <div class="jian"></div>
            <div class="num"></div>
            <div class="jia"></div>
          </div>
        </div>
        <div class="chouse_name">
          <div class="name_img"></div>
          <div class="name_money">
            <ul>
              <li>番茄250g/份</li>
              <li>月售10件</li>
              <li>
                <p>￥33.6</p>
                <p>￥33.6</p>
              </li>
            </ul>
          </div>
          <div class="name_num">
            <div class="jian"></div>
            <div class="num"></div>
            <div class="jia"></div>
          </div>
        </div>
        <div class="chouse_name">
          <div class="name_img"></div>
          <div class="name_money">
            <ul>
              <li>番茄250g/份</li>
              <li>月售10件</li>
              <li>
                <p>￥33.6</p>
                <p>￥33.6</p>
              </li>
            </ul>
          </div>
          <div class="name_num">
            <div class="jian"></div>
            <div class="num"></div>
            <div class="jia"></div>
          </div>
        </div>
        <div class="chouse_name">
          <div class="name_img"></div>
          <div class="name_money">
            <ul>
              <li>番茄250g/份</li>
              <li>月售10件</li>
              <li>
                <p>￥33.6</p>
                <p>￥33.6</p>
              </li>
            </ul>
          </div>
          <div class="name_num">
            <div class="jian"></div>
            <div class="num"></div>
            <div class="jia"></div>
          </div>
        </div>
        <div class="chouse_name">
          <div class="name_img"></div>
          <div class="name_money">
            <ul>
              <li>番茄250g/份</li>
              <li>月售10件</li>
              <li>
                <p>￥33.6</p>
                <p>￥33.6</p>
              </li>
            </ul>
          </div>
          <div class="name_num">
            <div class="jian"></div>
            <div class="num"></div>
            <div class="jia"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- <router-link to="/Deals"> -->
    <div class="shop_car" @click="showPopup">
      <div class="card">
        <img src="../../assets/basket@3x.png" alt="" />
      </div>
      <div class="shopnum">
        <div class="cardnum">
          <p>购物车为空</p>
        </div>
        <div class="settlement">
          <p>去结算</p>
        </div>
      </div>
    </div>

    <Deals v-show="show" />
    <!-- </router-link> -->
  </div>
</template>

<script setup>
import Deals from '../Shopname/components/Details-car.vue'
import { ref, createApp } from 'vue';
import { Popup } from 'vant';
let active = ref(0)

const show = ref(false)
const showPopup = () => {
  show.value = true
}

const app = createApp();
app.use(Popup);





</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.16rem 0;
  width: 100%;
  height: 0.32rem;

  .left {
    margin-right: 0.16rem;
    width: 0.15rem;
    height: 0.22rem;

    font-size: 0.25rem;
    line-height: 0.22rem;
  }

  input {
    width: 3.1rem;
    height: 0.32rem;
    border: none;
    outline: none;
    text-indent: 0.35rem;
  }

  .sglass {
    position: absolute;
    left: 0.75rem;
    top: 0.24rem;
    width: 0.2rem;
    height: 0.16rem;
    font-size: 0.2rem;
    line-height: 0.16rem;
  }
}

.nearshop {
  margin: 0.16rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.first_shop {
  width: 100%;
  display: flex;
  width: 3.39rem;
  height: 0.86rem;
  margin-bottom: 0.16rem;

  .img {
    width: 0.56rem;
    height: 0.56rem;
    background-color: skyblue;
    border-radius: 0.5rem;
  }

  .massage {
    margin-left: 0.16rem;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-direction: column;
    width: 2.67rem;
    height: 0.86rem;

    .money {
      width: 2rem;
      display: flex;
      justify-content: space-between;
      align-content: space-around;
      flex-direction: row;

      p {
        font-size: 0.13rem;
        color: #333333;
      }
    }

    :last-child {
      font-size: 0.13rem;
      color: #e93b3b;
    }

    h3 {
      font-size: 0.16rem;
      color: #333333;
    }
  }
}

.chouse_list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: -1;

  .chouse_left {
    width: 0.76rem;
    // height: 100%;
    background-color: #f1f1f1;

    li {
      margin: 0.16rem 0;
      width: 0.76rem;
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: center;
      font-size: 0.14rem;
      //   background-color: blue;
    }
  }

  .chousename {
    width: 3.2rem;
    display: flex;
    flex-direction: column;

    .chouse_name {
      margin-bottom: 0.16rem;
      display: flex;
      justify-content: space-between;
      width: 3.2rem;
      height: 0.68rem;

      .name_img {
        width: 0.7rem;
        height: 0.68rem;
        background-color: blanchedalmond;
      }

      .name_money {
        width: 0.83rem;
        height: 0.68rem;

        ul {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-content: space-between;
          flex-direction: column;

          li {
            margin-bottom: 0.05rem;
            width: 0.83rem;
            height: 0.2rem;
          }
          li:nth-child(1) {
            font-size: 0.14rem;
          }

          li:nth-child(2) {
            font-size: 0.12rem;
          }

          li:nth-child(3) {
            display: flex;
            justify-content: space-between;
            font-size: 0.14rem;

            p:nth-child(1) {
              color: red;
            }

            p:last-child {
              font-size: 0.1rem;
              color: #999999;
              text-decoration: line-through;
            }
          }
        }
      }

      .name_num {
        position: relative;
        width: 0.76rem;
        height: 0.68rem;

        .jian {
          position: absolute;
          bottom: 0;
          width: 0.2rem;
          height: 0.2rem;
          background-color: pink;
        }

        .num {
          position: absolute;
          bottom: 0;
          left: 0.27rem;
          width: 0.21rem;
          height: 0.2rem;
          background-color: pink;
        }

        .jia {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 0.2rem;
          height: 0.2rem;
          background-color: pink;
        }
      }
    }
  }
}

.shop_car {
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  margin-top: 0.16rem;
  width: 100%;
  height: 0.49rem;
  background-color: white;

  .card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.76rem;
    height: 0.49rem;

    img {
      width: 0.28rem;
      height: 0.26rem;
    }
  }

  .shopnum {
    display: flex;
    justify-content: center;
    width: 3.2rem;
    height: 0.49rem;

    .cardnum {
      font-size: 0.12rem;
      line-height: 0.49rem;
      margin-right: 0.2rem;
      width: 2rem;
      height: 0.49rem;
    }

    .settlement {
      text-align: center;
      line-height: 0.49rem;
      color: white;
      font-size: 0.14rem;
      width: 1rem;
      height: 0.49rem;
      background-color: #4fb0f9;
    }
  }
}
</style>